<%@ page language="java" contentType="text/html; charset=UTF-8"
		 pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
	<title>添加教师 - 智能选课系统</title>
	<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet">
	<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome@6.0.0-beta3/css/all.min.css">
	<script src="http://static.runoob.com/assets/jquery-validation-1.14.0/lib/jquery.js"></script>
	<script src="http://static.runoob.com/assets/jquery-validation-1.14.0/dist/jquery.validate.min.js"></script>
	<script src="http://static.runoob.com/assets/jquery-validation-1.14.0/dist/localization/messages_zh.js"></script>
	<style type="text/css">
		body {
			font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
			background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
			padding: 20px;
			min-height: 100vh;
		}

		.add-container {
			max-width: 700px;
			margin: 0 auto;
			background: white;
			border-radius: 15px;
			box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
			overflow: hidden;
		}

		.add-header {
			background: linear-gradient(135deg, #3498db, #2980b9);
			color: white;
			padding: 20px 30px;
			text-align: center;
		}

		.add-header h3 {
			margin: 0;
			font-weight: 600;
			display: flex;
			align-items: center;
			justify-content: center;
		}

		.add-header h3 i {
			margin-right: 10px;
			font-size: 1.5rem;
		}

		.add-body {
			padding: 30px;
		}

		.form-table {
			width: 100%;
			border-collapse: collapse;
			margin-top: 20px;
		}

		.form-table th {
			background: linear-gradient(135deg, #2c3e50, #34495e);
			color: white;
			padding: 15px;
			text-align: center;
			font-weight: 600;
			width: 30%;
		}

		.form-table td {
			padding: 15px;
			border-bottom: 1px solid #eaeaea;
			background: #f9f9f9;
		}

		.form-table tr:last-child td {
			border-bottom: none;
		}

		.form-control {
			width: 100%;
			padding: 12px;
			border: 1px solid #ddd;
			border-radius: 5px;
			font-size: 1rem;
			transition: all 0.3s ease;
		}

		.form-control:focus {
			border-color: #3498db;
			box-shadow: 0 0 0 0.2rem rgba(52, 152, 219, 0.25);
			outline: none;
		}

		.radio-group {
			display: flex;
			gap: 15px;
		}

		.radio-group label {
			display: flex;
			align-items: center;
			cursor: pointer;
			gap: 5px;
		}

		.btn-group {
			display: flex;
			justify-content: center;
			gap: 15px;
			margin-top: 20px;
		}

		.btn-submit {
			background: linear-gradient(135deg, #27ae60, #2ecc71);
			color: white;
			border: none;
			padding: 12px 30px;
			border-radius: 5px;
			font-weight: 600;
			cursor: pointer;
			transition: all 0.3s ease;
			font-size: 1.1rem;
		}

		.btn-reset {
			background: linear-gradient(135deg, #95a5a6, #7f8c8d);
			color: white;
			border: none;
			padding: 12px 30px;
			border-radius: 5px;
			font-weight: 600;
			cursor: pointer;
			transition: all 0.3s ease;
			font-size: 1.1rem;
		}

		.btn-submit:hover, .btn-reset:hover {
			transform: translateY(-2px);
			box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
		}

		.error {
			color: #e74c3c;
			font-size: 0.9rem;
			margin-top: 5px;
			display: block;
		}

		.back-btn {
			display: block;
			text-align: center;
			margin-top: 25px;
		}

		.back-btn a {
			display: inline-block;
			padding: 10px 20px;
			background: linear-gradient(135deg, #95a5a6, #7f8c8d);
			color: white;
			border-radius: 5px;
			text-decoration: none;
			transition: all 0.3s ease;
		}

		.back-btn a:hover {
			transform: translateY(-2px);
			box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
			text-decoration: none;
			color: white;
		}

		@media (max-width: 768px) {
			.add-body {
				padding: 20px 15px;
			}

			.form-table {
				font-size: 0.9rem;
			}

			.form-table th,
			.form-table td {
				padding: 10px 5px;
				display: block;
				width: 100%;
				text-align: left;
				box-sizing: border-box;
			}

			.form-table th {
				background: #2c3e50;
				margin-top: 10px;
			}

			.btn-group {
				flex-direction: column;
			}

			.radio-group {
				flex-direction: column;
				gap: 10px;
			}
		}
	</style>
	<script type="text/javascript">
		$().ready(function() {
			$("#myform").validate({/*表单信息验证*/
				rules : {
					username : "required",
					No : {
						required : true,
						digits : true
					},
					age : {
						required : true,
						digits : true
					},
					collage : "required",
					password : "required",
					password_2 : {
						required : true,
						equalTo : "#password"
					}
				},
				messages : {
					username : {
						required : "请输入姓名",
					},
					No : {
						required : "请输入工号",
						digits : "只能输入数字串",
					},
					age : {
						required : "请输入年龄",
						digits : "只能输入数字串",
					},
					collage : {
						required : "请输入所在学院",
					},
					password : {
						required : "请输入密码",
					},
					password_2 : {
						required : "请确认密码",
						equalTo : "两次密码输入不一致",
					}
				},
				errorPlacement: function(error, element) {
					error.appendTo(element.parent());
				}
			});
		});
	</script>
</head>
<body>
<div class="add-container">
	<div class="add-header">
		<h3><i class="fas fa-chalkboard-teacher"></i> 添加教师用户</h3>
	</div>

	<div class="add-body">
		<form action="${pageContext.request.contextPath}/AddTeacher_Servlet" method="post" id="myform">
			<table class="form-table">
				<tr>
					<th>身份</th>
					<td>教师</td>
				</tr>
				<tr>
					<th>工号</th>
					<td>
						<input type="text" name="No" class="form-control" id="No" placeholder="请输入工号"/>
					</td>
				</tr>
				<tr>
					<th>姓名</th>
					<td>
						<input type="text" name="username" class="form-control" id="username" placeholder="请输入姓名"/>
					</td>
				</tr>
				<tr>
					<th>性别</th>
					<td>
						<div class="radio-group">
							<label>
								<input type="radio" name="sex" value='男' checked> 男
							</label>
							<label>
								<input type="radio" name="sex" value='女'> 女
							</label>
						</div>
					</td>
				</tr>
				<tr>
					<th>年龄</th>
					<td>
						<input type="text" name="age" class="form-control" id="age" placeholder="请输入年龄"/>
					</td>
				</tr>
				<tr>
					<th>学院</th>
					<td>
						<input type="text" name="collage" class="form-control" id="collage" placeholder="请输入所在学院"/>
					</td>
				</tr>
				<tr>
					<th>密码</th>
					<td>
						<input id="password" name="password" type="password" class="form-control" placeholder="请输入密码">
					</td>
				</tr>
				<tr>
					<th>确认密码</th>
					<td>
						<input type="password" name="password_2" class="form-control" id="password_2" placeholder="请确认密码"/>
					</td>
				</tr>
				<tr>
					<td colspan="2" style="text-align: center; background: white; border: none;">
						<div class="btn-group">
							<button type="submit" class="btn-submit"><i class="fas fa-plus-circle"></i> 添加</button>
							<button type="reset" class="btn-reset"><i class="fas fa-redo"></i> 重置</button>
						</div>
					</td>
				</tr>
			</table>
		</form>

		<div class="back-btn">
			<a href="javascript:history.back()"><i class="fas fa-arrow-left"></i> 返回</a>
		</div>
	</div>
</div>
</body>
</html>